<template>
  <a-drawer destroyOnClose title="入库样本确认" width="80%" :visible="visible" @close="onClose">
    <vxe-table
      align="center"
      :row-config="{ height: 40, isHover: true }"
      show-overflow
      ref="xTable2"
      :border="false"
      auto-resize
      :data="tableData"
      max-height="630px"
      @toggle-row-expand="toggleExpandChangeEvent2"
    >
      <vxe-column type="expand" width="80">
        <template #content="{ row, rowIndex }">
          <div class="expand-wrapper">
            <vxe-table ref="vxetable10" align="center" size="mini" border :data="row.tableData">
              <vxe-column field="seat" title="位置"></vxe-column>
              <vxe-column field="originalSerial" title="样本编号"></vxe-column>
              <vxe-column field="name" title="样本名称"></vxe-column>
              <vxe-column field="sampleTime" title="采样日期"></vxe-column>
              <vxe-column field="capacity" title="容量"></vxe-column>
            </vxe-table>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="serial" title="冻存盒编号"></vxe-column>
      <vxe-column field="boxSerial" title="冻存盒类型"></vxe-column>
      <vxe-column field="projectNames" title="项目组"></vxe-column>
    </vxe-table>
    <doubleLock :type="2" ref="double"></doubleLock>
    <template #footer>
      <div style="display: flex; justify-content: center; align-items: center">
        <a-button style="margin-right: 15px" @click="onClose">关闭</a-button>
        <a-button :disabled="double?.disbun" type="primary" @click="submut">确认</a-button>
      </div>
    </template>
  </a-drawer>
</template>
<script setup lang="ts">
import { ref, defineExpose, reactive, defineEmits, nextTick } from 'vue';
import doubleLock from '@/components/doubleLock.vue';
const emit = defineEmits(['submitData']);
const xTable2 = ref();
const double = ref();
const props = defineProps({
  tableData: { type: Array, default: [] },
  manageLinkList: { type: Array, default: [] },
});
const onClose = () => {
  visible.value = false;
};
const formState = reactive({
  username: '',
  password: '',
});
const toggleExpandChangeEvent2 = ({ expanded }) => {
  console.log(expanded);
};
// 弹框逻辑部分
const visible = ref(false);
const numType = ref();
const onOpen = (num, data) => {
  numType.value = num;
  visible.value = true;
  nextTick(() => {
    xTable2.value.reloadData(data);
  });
  console.log(props.tableData, props.manageLinkList, 77, num, data);
};
const submut = () => {
  let str = double.value.swipe
    .filter((item) => item.status == 1)
    .map((item) => item.name)
    .join();

  onClose();
  emit('submitData', [numType.value, str]);
};
defineExpose({
  onOpen,
});
</script>
<style lang="less" scoped>
.inptable {
  flex: 1;
  margin-left: 20px;
}

.inventory {
  border: 1px solid #ccc;
  height: 85%;
  width: 100%;
  overflow: auto;
}
:deep(.vxe-icon--arrow-right:before) {
  border-top-color: #606266;
  border-right-color: #606266;
}
</style>
